<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:app="http://www.appcelerator.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="pragma" content="no-cache" />

	<title>Appcelerator Custom Events &raquo; Playing with Messages</title>

	<!-- appcelerator.org : main soa/ria library -->
	<script src="scripts/appcelerator.js" type="text/javascript"></script>

	
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
			background-color: #4f4e45;
			font-family: Tahoma, Arial, sans-serif;
		}

		#header {
			height: 30px;
			background-color: #111;
			color: #EEE;
			font-size: 10pt;
			padding-top: 4px;
			border-bottom: 1px solid #333;
		}
  
		#main {
			margin: 20px auto;  
			height: 181px;
			width: 610px;
		}
  
		#main h2 {
			font-weight: normal;
			margin: 0;
			color: #ff9600;
			font-size: 14pt;
			font-family: Tahoma, Arial, sans-serif;
			padding-bottom: 1em;
		}
  
		#leftchoices {
			padding: 0;
			margin: 0;
			float: left;
			font-size: 12pt;
			list-style-type: none;
			width: 180px;
		}
  
		#leftchoices li {
			padding: 5px;
		}

		#leftchoices li:hover {
			background-color: #333;
			color: #999;
			cursor: pointer;
		}
  
		#rightcontent {
			float: right;
			width: 385px;
			padding: 5px 20px;
			color: #999;
		}

	</style>
</head>
<body style="visibility:hidden" on="l:app.compiled then visible or l:do.colour then script[document.body.style.backgroundColor = (document.body.style.backgroundColor == 'rgb(255, 255, 255)' || document.body.style.backgroundColor == '#ffffff') ? '#4f4e45' : '#ffffff';]">

	<div id="header" align="center">
		<app:iterator items="['colour','content']">
			<html:input type="checkbox" id="#{iterator_value}"></html:input>Change #{iterator_value}?
		</app:iterator>
	</div>

	<div id="main">

		<h2>Testing custom events and interception (Appcelerator Port: go SOA!)</h2>

		<ul id="leftchoices">
			<app:iterator on="l:do.quotes then execute">
				<html:input id="#{id}" type="hidden" value="#{quote}"></html:input>
				<html:li on="click then l:do.colour if expr[$('colour').checked] or click then l:do.quote[text=$#{id}] if expr[$('content').checked]">#{name}</html:li>
			</app:iterator>
		</ul>

		
		<div id="rightcontent" on="l:do.quote then value[text]">&laquo; Choose an option from the menus to my left</div>
	</div>
	
	<script type="text/javascript">		
		var quotes = [
			{ "id": "shakespeare", "name": "William Shakespeare", "quote": "All the world's a stage, And all the men and women merely players; They have their exits and their entrances, And one man in his time plays many parts, His acts being seven ages." },
			{ "id": "fry", "name": "Stephen Fry", "quote": "An original idea. That can't be too hard. The library must be full of them." },
			{ "id": "wright", "name": "Stephen Wright", "quote": "I almost had a psychic girlfriend but she left me before we met." },
			{ "id": "gandhi", "name": "Mahatma Gandhi", "quote": "An eye for an eye, and soon the whole world is blind." },
			{ "id": "mlk", "name": "Martin Luther King", "quote": "A nation that continues year after year to spend more money on military defense than on programs of social uplift is approaching spiritual doom." }
			];			
	</script>
	
	<!-- boot -->
	<app:script on="l:app.compiled then execute">
		$MQ("l:do.quotes", quotes);
		
		$MQL('l:~.*', function(type,msg,datatype,from) {
			Logger.info('Message Type: ' + type);
			Logger.info('Message Data: ' + Object.toJSON(msg));
			Logger.info('____________________________________');
		});
	</app:script>

</body>
</html>
